<template>

	<view class="register_box">
		<h1>新派送</h1>
		<view class="nav_box">
			<text :class="{'active': currentPage === 'register'}" @click="switchPage('register')">注册</text>
			<text :class="{'active': currentPage === 'login'}" @click="switchPage('login')">登录</text>
		</view>
		<view class="input_box" v-if="currentPage === 'register'">
			<input v-model="name" type="text" placeholder="请输入注册的用户名" @focus="handleFocus('username')"
				@blur="handleBlur('username')" :class="{'focused': focusedInput === 'username'}" />
			<input v-model="pass" type="text" placeholder="请输入注册的密码" @focus="handleFocus('password')"
				@blur="handleBlur('password')" :class="{'focused': focusedInput === 'password'}" />
		</view>

		<view class="input_box" v-if="currentPage === 'login'">
			<input type="text" v-model="name" placeholder="用户名" @focus="handleFocus('username')"
				@blur="handleBlur('username')" :class="{'focused': focusedInput === 'username'}" />
			<input type="text" v-model="pass" placeholder="密码" @focus="handleFocus('password')"
				@blur="handleBlur('password')" :class="{'focused': focusedInput === 'password'}" />
		</view>
		<button @click="submitForm">{{ currentPage === 'register' ? '注册' : '登录' }}</button>
		<view class="about">
			关于我们
		</view>
	</view>

</template>

<script>
	// 导入二次封装
	import request from '@/utils/request.js'
	import {
		ipconfig
	} from '../../ipconfig.js'
	console.log(ipconfig)
	export default {
		data() {
			return {
				focusedInput: null, // 用于跟踪当前获得焦点的输入框  
				currentPage: 'register', // 初始页面为注册页
				name: '',
				pass: '',
			};
		},
		methods: {
			// 切换页面
			switchPage(page) {
				this.currentPage = page;
				// 如果切换页面，可能需要重置focusedInput或其他状态  
				this.focusedInput = null;
			},
			// 获取焦点
			handleFocus(inputName) {
				this.focusedInput = inputName;
			},
			// 失去焦点
			handleBlur(inputName) {
				if (this.focusedInput === inputName) {
					this.focusedInput = null;
				}
			},
			// 点击切换登录/注册
			async submitForm() {
				// 先进行非空判断  
				if (!this.name || !this.pass) {
					uni.showToast({
						title: '用户名和密码不能为空',
						icon: 'none'
					});
					return; // 如果为空，则直接返回，不执行后续代码  
				}
				if (this.currentPage === 'register') {
					try {
						let resp = await request({
							url: `http://${ipconfig}:8002/admin/registeruser`,
							method: 'get',
							data: {
								name: this.name,
								pass: this.pass
							},

						})
						if (resp.data.msg === 'ok') { // 确保请求成功返回了数据  
							uni.showModal({
								title: '提示',
								content: '确定注册吗？',
								success: (res) => {
									console.log(res, 'res,res注册')
									if (res.confirm) { // 用户点击了确认  
										// 这里你可能需要再次发送注册请求，或者你已经发送了，只是需要显示一个成功消息  
										uni.showToast({
											title: '注册成功!',
											icon: 'success'
										});
										// 切换到登录页面  
										this.currentPage = 'login'; // 设置 currentPage 为 'login'
									}
								}
							});
						}
					} catch (error) {
						console.error('注册请求失败：', error);
						uni.showToast({
							title: '注册失败',
							icon: 'none'
						});
					}
				}
				else {
					// 登录逻辑  
					let res = await request({ // 确保await在async函数内部使用  
						url: `http://${ipconfig}:8002/admin/loginuser`,
						method: 'POST',
						data: {
							name: this.name,
							pass: this.pass
						}
					});
					console.log(res, '登录响应'); // 打印完整的响应以进行调试  
					// 假设服务器返回的是一个JSON对象，其中包含一个表示登录状态的字段    
					if (res.data.msg === 'ok') { // 确保res.data存在且msg为'ok'  
						this.$store.commit('getUsername', this.name)
						// 登录成功，清空表单并跳转到其他页面或进行其他操作    
						this.name = '';
						this.pass = '';
						uni.reLaunch({ // 或其他跳转逻辑    
							url: '/pages/mine/mine',
						});
					} else {
						// 登录失败，显示错误提示    
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none'
						});
					}
				}
			}

		},
	};
</script>

<style scoped lang="scss">
	.register_box {
		width: 80%;
		height: 400px;
		margin: 0 auto;
		margin-top: 100px;

		h1 {
			text-align: center;
			color: #0e932e;
		}

		.nav_box {
			text-align: center;
			width: 50%;
			margin: 0 auto;
			margin-top: 30px;
			display: flex;
			justify-content: space-around;
			color: #333333;

			text {
				border-bottom: 1px solid transparent;
			}

			.active {
				color: #0e932e;
				border-bottom: 1px solid #0e932e;
			}
		}

		.input_box {
			.focused {
				border-color: #0e932e;
			}

			input {
				border: 1px solid #dddddd;
				margin-top: 20px;
				height: 38px;
				border-radius: 5px;
				padding-left: 5px;
			}
		}

		button {
			border: none;
			outline: none;
			margin-top: 20px;
			height: 38px;
			line-height: 38px;
			border-radius: 5px;
			text-align: center;
			color: #fff;
			background-color: #4cd96f;
		}

		.about {
			text-align: center;
			color: #b5b5b5;
			font-size: 12px;
			margin-top: 15px;
		}
	}
</style>